<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Page Title -->
    <title>GeoPortal Template</title>
    
    <!-- Meta Information -->
    <meta charset="utf-8" />
    <meta content="Tobin Bradley" name="author" />
    <meta content="gis geoportal" name="keywords" />
    <meta content="GeoPortal Template" name="description" />
    <meta content="all" name="robots" />
    <meta content="no" http-equiv="imagetoolbar" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
         
    <!-- Favicon -->
    <link href="image/favicon.ico" type="image/x-icon" rel="Shortcut Icon" />
     
    
    <!-- Style Sheets -->
    <!-- jquery ui stylesheets on Google's CDN include base, black-tie, blitzer, cupertino, dot-luv,
    excite-bike, hot-sneaks, humanity, mint-choc, redmond, smoothness, south-street, start,
    swanky-purse, trontastic, ui-darkness, ui-lightness, and vader -->
    <link type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/cupertino/jquery-ui.css" rel="stylesheet" />
    <link type="text/css" media="all" href="style/screen.css" rel="stylesheet" />
    <link type="text/css" media="print" href="style/print.css" rel="stylesheet" />
    <!-- Drop in CSS for mobile if Android or iPhone detected -->
	<script>
		if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
			document.write('<link rel="stylesheet" href="style/mobile.css" type="text/css" />');
		}
	</script>
    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="style/ie6.css" />
    <![endif]-->
    
    
    <!-- javascript libraries -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    <script src="script/jquery/jquery.layout.min-1.2.0.js"></script>
	<script src="script/jquery/jquery.tmpl.min.js"></script>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
	<script src="script/geoportal-settings.js"></script>
    <script src="script/map.js"></script>
    <script src="script/page.js"></script>
    <script src="script/functions.js"></script>
    
    <!-- optional modules -->
    <!-- Google Maps       
		 You'll need your own Google API key for your server - http://code.google.com/apis/maps/signup.html
            <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
			<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAm9Ct4PrMS0FyB27XUOQdYxR-TlFWa-ixQv6TGmWnzLW5-fdhCRQsPfs1MBWByIdCWwa6k2vRIAW-YA"></script> 
            <script src='script/modules/mod_googlemaps.js'></script> 
    -->
</head>
<body>
    <!-- Header -->                
    <div class="ui-layout-north" id="header">
        <div id="searchdiv" class="ui-widget-header ui-widget-header ui-corner-all alignleft screen-only">
        	<label for="searchinput">Search<span class="ui-icon ui-icon-help alignright" title="Search Help"></span></label><input id="searchinput" class="ui-corner-all" placeholder="Start here! Try typing: 700 N" />
    	</div>
		
		<div id="header-logo" class="alignright"><img src="image/gp_logo.png" alt="Logo Image" /></div>
		
    </div>
    
    <!-- Center Panel -->
    <div class="ui-layout-center ui-widget-content ui-corner-all">
        
        <div class="ui-layout-middle">
            <div class="ui-layout-middle-north">
                <div id="toolbar" class="screen-only ui-widget-header ui-corner-top">
                    <div id="mapcontrols">
                        <input type="radio" id="navigate" name="mapcontrol-button" value="none" checked="checked" /><label for="navigate">Navigate</label>
                        <input type="radio" id="line" name="mapcontrol-button" value="line" /><label for="line">Measure Line</label>
                        <input type="radio" id="polygon" name="mapcontrol-button" value="polygon" /><label for="polygon">Measure Area</label>
                        <input type="radio" id="zoomin" name="mapcontrol-button" value="zoomin" /><label for="zoomin">Zoom In</label>
                        <input type="radio" id="zoomout" name="mapcontrol-button" value="zoomout" /><label for="zoomout">Zoom Out</label>
                        <input type="radio" id="identify" name="mapcontrol-button" value="identify" /><label for="identify">Identify</label>                     
                        <button id="zoom_previous">Zoom Previous</button>
                        <button id="zoom_next">Zoom Next</button>
                        <span id="toolbar-text-output" class="alignright"></span>
                    </div>
                </div>
            </div>
        
            <div class="ui-layout-middle-center ui-widget-header ui-corner-bottom">   
                <div id="map"></div>
            </div>
        </div>
        
    </div>
         
    <!-- Left sidebar -->
    <div class="ui-layout-west">
        <!-- Tabs  -->
        <div id="left-tabs">
            <ul> 
                <li><a href="#tabs-data">Data</a></li> 
                <li><a href="#tabs-map">Map</a></li>
            </ul>
            
            <!-- Data Tab -->
            <div id="tabs-data">
                
                <!-- Data Accordion -->
                <div id="accordion-data" class="accordion">
                    <h3 id="WELCOME"><a href="#">Welcome</a></h3>
                    <div>                       
                        <h5 class="aligncenter">Welcome To GeoPortal</h5>
                        <p>GeoPortal is an advanced web mapping system created by Mecklenburg County GIS. Its mission is to be an easy to use "portal" into
                        Mecklenburg County's data and services.</p> <p>This site is powered by <a href="http://en.wikipedia.org/wiki/Open_source#Terms_based_on_open_source" target="_blank" >free and open source software</a>.
                        The source code for this site is released under the <a href="http://en.wikipedia.org/wiki/MIT_X11" target="_blank">MIT free software license</a> and can be downloaded <a href="http://fuzzytolerance.info/projects/" target="_blank">here</a>.</p>
                        <p class="gpslocation"><img src="image/target-icon.png" alt="Where am I?" /><a href="javascript:void(0)" id="gogpslocation">Where am I?</a></p>
						<div>
                            <h5>Search Results</h5>
                            <span class="selectedLocation">No records selected.</span>
                        </div>
                    </div>
                    <h3 id="TRANSPORTATION"><a href="#">Transportation</a></h3>
                    <div>
                        <h5>Search Results</h5>
                        <div class="selectedLocation">No property currently selected.</div>
                        <div id="bus-stops" class="selected-data">
							<table class="datatable">
								<caption>10 Nearest CATS Bus Stops</caption>
								<thead>
									<tr>
										<th class="ui-state-default"></th>
										<th class="ui-state-default"></th>
										<th class="ui-state-default">Bus Stop</th>
										<th class="ui-state-default">Routes</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
						</div>
                        <div id="park-and-rides" class="selected-data">
                        	<table class="datatable">
								<caption>3 Nearest CATS Park & Ride</caption>
								<thead>
									<tr>
										<th class="ui-state-default"></th>
										<th class="ui-state-default"></th>
										<th class="ui-state-default">Bus Stop</th>
										<th class="ui-state-default">Routes</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
                        </div>
                        <div id="light-rail-stops" class="selected-data">
                        	<table class="datatable">
								<caption>3 Nearest CATS Lynx Stops</caption>
								<thead>
									<tr>
										<th class="ui-state-default"></th>
										<th class="ui-state-default"></th>
										<th class="ui-state-default">Bus Stop</th>
										<th class="ui-state-default">Routes</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
                        </div>
                    </div>
                    <h3 id="SERVICES"><a href="#">Services</a></h3>
                    <div>
                        <h5>Search Results</h5>
                        <div class="selectedLocation">No property currently selected.</div>
                        <div id="parks" class="selected-data">
                        	<table class="datatable">
								<caption>3 Nearest Parks</caption>
								<thead>
									<tr>
										<th class="ui-state-default"></th>
										<th class="ui-state-default"></th>
										<th class="ui-state-default">Park</th>
										<th class="ui-state-default">Address</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
                        </div>
                        <div id="libraries" class="selected-data">
                        	<table class="datatable">
								<caption>5 Nearest Libraries</caption>
								<thead>
									<tr>
										<th class="ui-state-default"></th>
										<th class="ui-state-default"></th>
										<th class="ui-state-default">Library</th>
										<th class="ui-state-default">Address</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
                        </div>
                        <div id="fire-stations" class="selected-data">
                        	<table class="datatable">
								<caption>3 Nearest Fire Stations</caption>
								<thead>
									<tr>
										<th class="ui-state-default"></th>
										<th class="ui-state-default"></th>
										<th class="ui-state-default">Fire Station</th>
										<th class="ui-state-default">Type</th>
										<th class="ui-state-default">Address</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
                        </div>
                    </div>
                </div>
                
            </div>
            
            <!-- Map Tab -->
            <div id="tabs-map">
                <!-- Map Accordion -->
                <div id="accordion-map" class="accordion">
                    <h3 id="MAPCONTROLS"><a href="#">Map Controls</a></h3>
                    <div>
                        <h5>Map Layers</h5>
                        <div id="layerswitcher"></div>
                        <h5>Layer Opacity</h5>
                        <select id="opacitydll"></select>
                        <div id="opacitySlider"></div>
                        <span id="layerOpacity" class="alignright">Layer Opacity: 50%</span><br />
                    </div>
                    <h3 id="LEGEND"><a href="#">Legend</a></h3>
                    <div>
                        <h5>Legend</h5>
                        <img src="image/legend.png" />
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>
    
    <!-- spacing element + to be used on printing-->	
    <div class="ui-layout-east">
        <div class="print-only">
            <p>This is a good place to put things you want to show up on your print, like
            disclaimers, legends, etc.</p>
        </div>
    </div>
	
	<!-- Footer -->
    <div class="ui-layout-south" id="footer">
        <div class="alignright" id="footer-text">
            GeoPortal Template &#183 
            <a href="http://code.google.com/p/geoportal/" title="GeoPortal">Project Page</a>
        </div>
    </div>
    
    <!-- Welcome screen - jQuery UI Dialog -->
    <div id="search-dialog" title="Search Help">
		<p>
		The secrect to successful searches is to <em>let the search box do the work for you</em>. 
		Select a match using either the mouse or the up/down arrow keys and Enter.
		</p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><b>Address</b>: Enter the first part of the address. Ex: for 700 North Tryon Street, try <em>700 n</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><b>Place</b>: Enter any part of a place name. Ex: type <em>carolina</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><b>Street</b>: Enter the name of the street. Ex: type <em>ruth</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><b>Intersection</b>: Enter a street name, followed by an &amp;. Ex: type <em>ruth &amp;</em></p>
		<p><span class="ui-icon ui-icon-circle-check alignleft"></span><b>Parcel ID</b>: Enter an 8-digit Parcel ID. Ex: type <em>11111111</em></p>
    </div>
	
	<!-- Report Templates -->
		<!-- Template for generic nearest facility searches. -->
		<script id="locate_template" type="text/x-jquery-tmpl">
			{{if $item.rowCount > 0 }}
				<tr>
					<td class="ui-widget-content">
						<a href="javascript:void(0);" title="Locate on the map." onclick="addMarker(${row.lon}, ${row.lat}, 1, ' ${"<b>" + row.name  + "</b><br />Routes: " + row.address } ' );"><img src='image/find.gif' style='margin: 0px' /></a>
					</td>
					<td class="ui-widget-content">
						<a href="javascript:void(0);"  title="Get driving directions." onclick="window.open(googleRoute(selectedAddress.address, '${row.lat + "," + row.lon}' ),'routewindow');"><img src='image/car.png' style='margin: 0px' /></a>
					</td>
					<td class="ui-widget-content">${row.name}</td>
					{{if row.type}}
						<td class="ui-widget-content">${row.type}</td>
					{{/if}}
					<td class="ui-widget-content">${row.address}</td>
				</tr>
			{{else}}
				<tr><td colspan="4">No records found.</td></tr>	
			{{/if}}
		</script>
	<!-- End Report Templates -->

    
</body>
</html>
